<template>
	<view>
		<u-form :model="userForm" ref="userForm">
			<view class="tform">
				<u-form-item label="姓名" label-width="40px" prop="realName" borderBottom>
					<u--input v-model="userForm.realName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别" label-width="40px" @click="showSex = true" prop="gender" borderBottom>
					<u--input v-model="userForm.gender" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="身份证号" label-width="80px" prop="idCardNum" borderBottom>
					<u--input v-model="userForm.idCardNum" border="none"></u--input>
				</u-form-item>
			</view>
			<view class="tform">
				<u-form-item @click="readFile('backImg')" label="证件照国徽面" labelPosition="top" label-width="120px" prop="backImg"
					borderBottom>
					<input style="display: none;" disabled v-model="userForm.backImg"></nput>
					<u--image v-if="userForm.backImg" mode="widthFix" :src="userForm.backImg" width="100%"></u--image>
					<u--image v-else :src="backPath" mode="widthFix" width="100%"></u--image>
				</u-form-item>
				<u-form-item  @click="readFile('frontImg')" label="证件照人像面" labelPosition="top" label-width="120px" prop="frontImg" borderBottom>
					<input style="display: none;" disabled v-model="userForm.frontImg"></input>
					<u--image v-if="userForm.frontImg" :src="userForm.frontImg" mode="widthFix" width="100%"></u--image>
					<u--image v-else :src="frontPath" mode="widthFix" width="100%"></u--image>
				</u-form-item>
			</view>
		</u-form>
		<button class="submit" @click="submit">开始认证</button>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>

</template>

<script>
	import {
		authenticationRules
	} from "utils/verify/userRules"
	import {authenticationRequest} from "apis/farmer/user"
	import {uploadIdCardBack,uploadIdCardFront} from "apis/file"
	import backPath from "static/icon/img/infotow.png"
	import frontPath from "static/icon/img/infoone.png"
	const constantSex = [{
			value: 1,
			name: "男"
		},
		{
			value: 0,
			name: "女"
		}
	]
	const sexNameList = constantSex.map(({
		name
	}) => ({
		name
	}))
	export default {
		data() {
			return {
				showSex: false,
				actions: sexNameList,
				backPath,
				frontPath,
				authenticationRules,
				userForm: {
					gender: sexNameList[0].name,
					realName: "",
					idCardNum: "",
					backImg: "",
					frontImg: ""
				}
			}
		},
		methods: {
			readFile(name) {
				const that = this
				uni.chooseImage({
					count: 1,
					success({tempFilePaths}) {
						that.userForm[name] = tempFilePaths[0]
					}
				})

			},

			sexSelect(e) {
				this.userForm.gender = e.name
			},
			submit() {
				const that = this
				that.$refs.userForm.validate().then(async () => {
					const resultBack = await uploadIdCardBack(that.userForm.backImg)
					const resultFront = await uploadIdCardFront(that.userForm.frontImg)
					const {code:codeBack,data:urlBack} = JSON.parse(resultBack)
					const {code:codeFront,data:urlFront} = JSON.parse(resultFront) 
					if(codeBack !== 200 || codeFront !== 200) return this.$errorMsg("图片上传失败")
					const {code,msg} = await authenticationRequest({
						...that.userForm,
						backImg: urlBack,
						frontImg: urlFront,
						gender: constantSex.filter(item=>item.name === that.userForm.gender)[0].value
					})
					if(code !== 200) return this.$errorMsg(msg)
					this.$successMsg("认证成功")
					setTimeout(()=>{
						this.goback()
					},1000)
				})
			}
		},
		onLoad() {
			this.$refs.userForm.setRules(this.authenticationRules)
		}
	}
</script>

<style>
	@import url("id_photo.css");
</style>
